<template>
  <div class="standards-management-container">
    <el-card class="search-card">
     

      <!-- 搜索条件区域 - 改为纵向排列 -->
      <div class="search-filters">
        <!-- 行业筛选 -->
        <div class="filter-group">
          <span class="filter-label">行业：</span>
          <span 
            class="all-button"
            :class="{ 'active': selectedIndustry === '' || selectedIndustry === null || selectedIndustry === undefined }"
            @click="handleAllButtonClick('industry')"
          >
            全部
          </span>
          <el-radio-group v-model="selectedIndustry" size="small" @change="handleChangehy">
            <el-radio-button v-for="item in industryOptions" :key="item.id" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 分类筛选 -->
        <div class="filter-group">
          <span class="filter-label">分类：</span>
          <span 
            class="all-button"
            :class="{ 'active': selectedCategory === '' || selectedCategory === null || selectedCategory === undefined }"
            @click="handleAllButtonClick('category')"
          >
            全部
          </span>
          <el-radio-group v-model="selectedCategory" size="small" @change="handleCategoryChange">
            <el-radio-button v-for="item in categoryOptions" :key="item.id" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 状态筛选 -->
        <div class="filter-group">
          <span class="filter-label">产品：</span>
          <span 
            class="all-button"
            :class="{ 'active': selectedStatus === '' || selectedStatus === null || selectedStatus === undefined }"
            @click="handleAllButtonClick('status')"
          >
            全部
          </span>
          <el-radio-group v-model="selectedStatus" size="small" @change="handleFilterChange">
            <el-radio-button v-for="item in statusOptions" :key="item.id" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 关键词搜索 -->
        <div class="search-input-group">
          <span class="filter-label">查询：</span>
          <el-input v-model="searchQuery" placeholder="请输入查询内容" size="small" prefix-icon="el-icon-search"
            :clearable="true" style="width: 300px;" @keyup.enter.native="QueryList"></el-input>
     

          <button type="primary" size="small" @click="QueryList" icon="el-icon-refresh-left" class="resetbutton2">
            <i class="el-icon-search"></i>
            <span>查询</span>
          </button>
          <button type="primary" size="small" @click="handleReset" icon="el-icon-refresh-left" class="resetbutton">
            <i class="el-icon-refresh-left"></i>
            <span>重置</span>
          </button>
        </div>

      </div>
    </el-card>

    <el-card class="result-card">
      <div v-for="(company, index) in productList.rows" :key="index" class="company-item"
       >
        <div class="company-logo">
          <!-- <img :src="company.logo" alt="Company Logo" v-if="company.logo" />
          <span v-else>{{ company.name.charAt(0) }}</span> -->
          <el-image
            v-if="company.image && company.image.trim() !== ''"
            :src="company.image"
            
            style="width: 100px; height: 100px; cursor: pointer;"
            fit="contain"
            alt="产品图片"
          >
          <!-- :preview-src-list="[company.image]" -->
          </el-image>
        </div>
        <div class="company-info"  @click="gotoqiyedetail(company)">
          <!-- 第一行：标题和行业标签 -->
          <div class="company-header-row">
            <h3 class="company-title">{{ company.name }}</h3>
            <div class="industry-tags">
              <span v-for="(industry, index) in company.baseIndustryList" :key="index" class="tag"><span>{{ industry.name }}</span></span>
            </div>
          </div>

          <!-- 第二行：公司简介 -->
          <p class="company-description">{{ company.description }}</p>

          <!-- 第三行：详细信息和上传日期 -->
          <div class="company-footer-row">
            <div class="company-contact-info">
              <h5 class="tax-code">{{ company.taxationCode }}</h5>
              <div class="contact-details">
                <span>{{ company.address }}</span>

                <span>{{ company.person }}</span>
              </div>
            </div>
            <div class="upload-date">
              <p>上传日期 {{ company.createTime }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 查看更多按钮 -->
      <div v-if="hasMore" class="load-more-container">
        <span 
          class="load-more-button"
          @click="loadMore"
        >
          查看更多
        </span>
      </div>
    </el-card>

    <!-- 已移除自定义弹窗，使用el-image组件内置的预览功能 -->

  </div>
</template>

<script>
import { getDictList, getIndustryCategory, getEnterpriseList } from '../../api/user';

export default {
  name: 'StandardsManagement',
  data() {
    return {
      // 筛选条件选项
      industryOptions: [],
      categoryOptions: [],
      statusOptions: [],
      standardList: [],
      productList: { total: 0, rows: [] },
      // 选中的筛选条件
      selectedIndustry: '',
      selectedCategory: '',
      selectedStatus: '',
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      // 是否还有更多数据可加载
      hasMore: true,
      fileListTemp: [],
      // 图片预览相关 - 已使用el-image组件内置功能

    };
  },
  created() {
    // this.getDictlists();
    this.gethyeList();
    this.QueryList();

  },
  methods: {
    // 图片预览相关方法 - 已使用el-image组件内置功能

    gotoqiyedetail(company) {
      this.$router.push({
        path: '/comDetails',
        query: {
          id: company.id
        }
      })
    },






    // 处理筛选条件变化
    handleChangehy(value) {
      this.selectedIndustry = value;
    },
    handleCategoryChange(value) {
      this.selectedCategory = value;
    },
    handleFilterChange(value) {
      this.selectedStatus = value;
    },
    // 处理全部按钮点击
    handleAllButtonClick(type) {
      if (type === 'industry') {
        this.selectedIndustry = '';
      } else if (type === 'category') {
        this.selectedCategory = '';
      } else if (type === 'status') {
        this.selectedStatus = '';
      }
      this.QueryList();
    },
    // 处理重置
    handleReset() {
      this.selectedIndustry = '';
      this.selectedCategory = '';
      this.selectedStatus = '';
      this.searchQuery = '';
      this.$message.success('筛选条件已重置', 1000);
      this.QueryList()
    },

    // 根据value获取option的label
    getOptionLabel(value, options) {
      const option = options.find(item => item.value === value);
      return option ? option.label : value;
    },

    getDictlists() {
      getDictList("sys_yes_no").then(res => {
        if (res.code === 200) {
          this.statusOptions = res.data;
        } else {
          // this.$message.error('获取状态信息失败', 1000);
          console.error('获取状态信息失败:', res);
        }
      })
    },
    // 获取行业分类列表
    gethyeList() {
      getIndustryCategory()
        .then(res => {
          // 检查res和res.data是否存在
          if (!res || !res.data || !Array.isArray(res.data)) {
            console.error('数据格式错误:', res);
            // this.$message.error('获取行业分类数据失败', 1000);
            return;
          }
          this.industryOptions = res.data

          // 方法1: 根据id或name查找目标数据（推荐）
          // 假设我们需要查找id为1的"通信"分类下的子分类
          const targetItem = res.data.find(item => item.id === 1 || item.name === '通信');

          // 如果找到了目标项且它有childArray，就使用它
          if (targetItem && targetItem.childArray) {
            this.categoryOptions = targetItem.childArray;
          } else {
            // 备选方案: 使用第一个有childArray的项
            const firstValidItem = res.data.find(item => item.childArray && Array.isArray(item.childArray));
            if (firstValidItem) {
              this.categoryOptions = firstValidItem.childArray;
            } else {
              // 如果都找不到，使用默认空数组避免报错
              this.categoryOptions = [];
              console.warn('未找到有效的分类数据');
            }
          }

          const childItem = res.data[0].childArray.find(item => item.id === 10 || item.name === '数据通信');
          if (childItem && childItem.childArray) {
            this.statusOptions = childItem.childArray;
          }



        })
        .catch(error => {
          console.error('获取行业分类数据失败:', error);
          this.categoryOptions = []; // 出错时设置为空数组
        })
    },


    QueryList() {
      // 重置页码和数据
      this.currentPage = 1;
      this.productList.rows = [];
      
      getEnterpriseList({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        // 只有当参数有实际值时才展开添加
        ...(this.searchQuery && this.searchQuery.trim() !== '' ? { name: this.searchQuery } : {}),
        // 优先使用分类选择的值作为industryId，如果分类未选择则使用行业选择的值
        ...((this.selectedCategory && this.selectedCategory !== '' && this.selectedCategory !== null && this.selectedCategory !== undefined) ? 
           { industryId: this.selectedCategory } : 
           (this.selectedIndustry && this.selectedIndustry !== '' && this.selectedIndustry !== null && this.selectedIndustry !== undefined ? 
            { industryId: this.selectedIndustry } : {})),
        ...(this.selectedStatus && this.selectedStatus !== '' && this.selectedStatus !== null && this.selectedStatus !== undefined ? { status: this.selectedStatus } : {}),
      }).then(res => {
        if (res.code === 200) {
          // 修改赋值方式，同时保存total和rows
          this.productList = {
            total: res.total || 0,
            rows: res.rows || []
          };
          // 检查是否还有更多数据
          this.hasMore = this.productList.rows.length < this.productList.total;
        } else {
          // this.$message.error('查询列表失败', 1000);
          console.error('查询列表失败:', res);
          // 出错时也应保持正确的数据结构
          this.productList = { total: 0, rows: [] };
          this.hasMore = false;
        }
      }).catch(error => {
        console.error('查询出错:', error);
        // this.$message.error('查询发生错误', 1000);
        // 捕获异常时也要保持正确的数据结构
          this.productList = { total: 0, rows: [] };
          this.hasMore = false;
      });
    },
    handleDetailClick(item) {
      this.$router.push({
        path: '/guochanDetail',
        query: {
          id: item.type
        }
      })
    },
    GotoClick(item) {
      this.$router.push({
        path: '/proDetails',
        query: {
          id: item.id
        }
      })
    },
    // 加载更多数据
    loadMore() {
      this.currentPage++;
      getEnterpriseList({
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        // 只有当参数有实际值时才展开添加
        ...(this.searchQuery && this.searchQuery.trim() !== '' ? { name: this.searchQuery } : {}),
        // 优先使用分类选择的值作为industryId，如果分类未选择则使用行业选择的值
        ...((this.selectedCategory && this.selectedCategory !== '' && this.selectedCategory !== null && this.selectedCategory !== undefined) ? 
           { industryId: this.selectedCategory } : 
           (this.selectedIndustry && this.selectedIndustry !== '' && this.selectedIndustry !== null && this.selectedIndustry !== undefined ? 
            { industryId: this.selectedIndustry } : {})),
        ...(this.selectedStatus && this.selectedStatus !== '' && this.selectedStatus !== null && this.selectedStatus !== undefined ? { status: this.selectedStatus } : {}),
      }).then(res => {
        if (res.code === 200) {
          // 追加新数据到现有列表
          this.productList.rows = [...this.productList.rows, ...(res.rows || [])];
          // 更新总数
          this.productList.total = res.total || 0;
          // 检查是否还有更多数据
          this.hasMore = this.productList.rows.length < this.productList.total;
        } else {
          console.error('加载更多失败:', res);
          this.hasMore = false;
        }
      }).catch(error => {
        console.error('加载更多失败:', error);
        this.hasMore = false;
      });
    },
    // 首先需要确保API请求配置正确的responseType
    // 首先需要确保API请求配置正确的responseType
    // 直接拼接路径下载文件

  }
};
</script>

<style scoped>
.standards-management-container {
  margin: -10px;
  padding: 20px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  background-color: #152133;
  /* 确保背景色填充整个区域 */
  min-height: calc(100vh - 80px);
}

.card-header {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

.search-card,
.result-card {
  margin-bottom: 20px;
  background-color: #04142B;
  border: 1px solid #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 1600px;
  margin: 0 auto 20px;
}

/* 修改为纵向排列 */
.search-filters {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 0;
}
/* 查询重置按钮 */

/* 全部按钮样式 */
.all-button {
  width: 58.8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  cursor: pointer;
  border: 1px solid white;
  background: none;
  transform: skew(-5deg);
  border-radius: 4px;
  margin-right: 10px;
}

/* 全部按钮激活状态样式 */
.all-button.active {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border: 1px solid;
  border-top: none;
  border-radius: 4px;
  margin-right: 10px;
  
  transform: skew(-5deg);
  border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
}

/* 全部按钮悬浮效果 */
.all-button:hover {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border: 1px solid;
  border-top: none;
  border-radius: 4px;
  border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
}
.resetbutton{
  width: 92px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #182F50;
  transform: skew(-10deg);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-radius: 4px;
border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}
.resetbutton span{
  transform: skew(10deg);
}
/* 移除重置按钮点击时的黑色边框 */
.resetbutton:focus {
  outline: none !important;
  border: 1px solid #1A9AD9;
  background: #182F50;
}
.resetbutton2{
  width: 92px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #fff;
  display: flex;
  margin: 0px 10px;

  align-items: center;
  justify-content: center;
  /* background: #182F50; */
  transform: skew(-10deg);
background: linear-gradient( 180deg, rgba(0,135,255,0.25) 0%, rgba(0,135,255,0.52) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(136deg, rgba(44, 223, 232, 1), rgba(26, 154, 219, 1), rgba(26, 154, 217, 1)) 1 1;
}
.resetbutton2 span{
  transform: skew(10deg);
}
/* 移除重置按钮点击时的黑色边框 */
.resetbutton2:focus {
  outline: none !important;
  border: 1px solid #1A9AD9;
  background: #182F50;
}
.resetbutton2:hover {
  background: linear-gradient( 360deg, #0085FF 0%, rgba(0,163,255,0) 100%);
border-radius: 0px 0px 0px 0px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
border-top:none ;
}

/* 查询重置按钮 */
/* 每个筛选组单独占一行 */
.filter-group {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  width: 100%;
}

.filter-label {
  margin-right: 10px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 60px;
  color: #ffffff;
}

/* 查询输入组也改为纵向排列的一部分 */
.search-input-group {
  display: flex;
  align-items: center;

  margin-left: 0;
  width: 100%;
}

/* 单选按钮组样式 */
:deep(.el-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

:deep(.el-radio-button__inner) {
  color: #ffffff;
  background-color: #1a2b45;
  /* border: 1px solid #2CDFE8; */
  transform: skew(-5deg);
  transition: all 0.3s ease;
  border: 1px solid #fff;
  border-radius: 0px !important;

}

:deep(.el-radio-button:hover .el-radio-button__inner) {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(0, 163, 255, 0.5);
  border-top: none;
  /* border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1; */
}

/* 选中状态样式 */
:deep(.el-radio-button.is-active .el-radio-button__inner) {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(0, 163, 255, 0), rgba(0, 163, 255, 1)) 1 1;
}

/* 内容表格线 */
.standards-management-container .el-card.result-card {
  border: none;
}

/*  */
/* 输入框样式 */
:deep(.el-input__inner) {
  background-color: #152133;
  border: 1px solid #fff;
  color: #ffffff;
  transform: skew(-5deg);

}

/* :deep(.el-input__inner:focus) {
  border-color: #2CDFE8;
  box-shadow: 0 0 0 2px rgba(44, 223, 232, 0.2);
} */


:deep(.el-button--primary) {
  background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%) !important;
  border: none !important;
   background-color: transparent !important;
  /* 设置基础渐变背景 */
  /* background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%) !important; */
  /* 确保文字为白色 */
  color: white !important;
  /* 移除默认边框或设置为透明 */
  border: none !important;
  /* 确保按钮内文字和图标颜色一致 */
  transform: skew(-5deg);
  width: 90px;
  height: 30px;
  border: 1px solid;
}

/* 查询按钮hover效果 */
:deep(.el-button--primary:hover) {
  background: linear-gradient(360deg, #0085FF 0%, rgba(0, 163, 255, 0) 100%) !important;
  border-color: transparent !important;
}

/* 结果卡片优化 */
.result-card {
  border-radius: 8px;
}

.result-info {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 20px;
}

/* 企业信息项样式优化 */
.company-item {
  display: flex;
  border-radius: 8px;
  padding: 15px 15px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  background-color: #04142B;
  align-items: flex-start;
  align-items: center;
  justify-content: center;
}

.company-item:hover {
  background: linear-gradient(90deg, #1A3B6B 0%, rgba(26, 59, 107, 0) 100%);
}

/* 公司logo样式 */
.company-logo {
  width: 100px;
  height: 100px;
  
  border-radius: 8px;
  margin-right: 20px;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  background-color: #fff;
}

.company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  
}

/* 公司信息样式 */
.company-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 第一行：标题和行业标签 */
.company-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.company-title {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  flex: 0 0 auto;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  justify-content: flex-end;
}

.industry-tags .tag {
  padding: 4px 10px;
  background-color: #152133;
  white-space: nowrap;
  transform: skew(-15deg);
  color: #e0e0e0;
  border: 1px solid #fff;
  font-size: 13px;
}
.tag > span {
  transform: skew(15deg); /* 内层文字反向倾斜，保持水平 */
  display: inline-block; /* 确保转换生效 */
}
/* 第二行：公司简介 */
.company-description {
  font-size: 14px;
  color: #e0e0e0;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 1000px;
}

/* 第三行：详细信息和上传日期 */
.company-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.company-contact-info {
  flex: 1;
}
.product-image {
   width: 100px;
  height: 100px;
  object-fit: cover;
}
.tax-code {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #2CDFE8;
}

.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #e0e0e0;
}

.contact-details span {
  white-space: nowrap;
}

.upload-date {
  flex: 0 0 auto;
  text-align: right;
  font-size: 13px;
  color: #e0e0e0;
}

/* 查看更多按钮容器 */
.load-more-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* 查看更多按钮样式 */
.load-more-button {
  width: 404px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  cursor: pointer;
  background-image: url('../../assets/img/pro/watchother.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* 查看更多按钮悬浮效果 */
.load-more-button:hover {
  background-image: url('../../assets/img/pro/watchother2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* 响应式设计优化 */
@media screen and (max-width: 768px) {
  .standards-management-container {
    padding: 10px;
  }

  .result-card {
    padding: 15px;
  }

  .filter-label {
    min-width: 50px;
    color: #ffffff;
  }

  .search-input-group {
    flex-wrap: wrap;
  }

  /* 小屏幕企业信息项布局调整 */
  .company-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }

  .company-logo {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .company-info {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
  }

  .company-code {
    width: 100%;
    text-align: left;
  }
}

@media screen and (max-width: 480px) {
  .company-info h3 {
    font-size: 16px;
  }

  .company-info p {
    font-size: 13px;
  }

  .company-details {
    flex-direction: column;
    gap: 8px;
  }
}

:deep(.el-card__header) {
  border: none;
}

:deep(.el-card) {
  border: none;

}

/* 响应式设计下的查看更多按钮调整 */
@media screen and (max-width: 768px) {
  .load-more-button {
    width: 90%;
    max-width: 404px;
  }
}

/* 图片预览样式 */
.image-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: 20px;
}

.preview-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}

/* 弹窗样式调整 */
:deep(.el-dialog__header) {
  background-color: #04142B;
  border-bottom: 1px solid #fff;
}

:deep(.el-dialog__title) {
  color: #ffffff;
}

:deep(.el-dialog__body) {
  background-color: #152133;
  padding: 0;
  overflow: hidden;
}

:deep(.el-dialog__wrapper) {
  background-color: rgba(0, 0, 0, 0.5);
}

:deep(.el-dialog) {
  background-color: #152133;
  border: 1px solid #fff;
  border-radius: 8px;
}

</style>
<style>
.el-radio-button__inner:focus {
  outline: none;
}

.el-button:focus {
  outline: none;
}
</style>